<template>
  <div id="DataMaintenance-nutrition">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('gradenSet.gradenSet.nutrition.50zgpate6hc0')}}</span>
      </div>
      <div class="cr-head-right fs14">
        <i class="mh-jtsz mr5 cur-pointer" @click="handMealSet()"></i>
        <span class="mr20 cur-pointer" @click="handMealSet()">{{$t('gradenSet.gradenSet.nutrition.50zgpate7s00')}}</span>
        <el-button type="primary" size="mini" @click="handAdd">{{$t('gradenSet.gradenSet.nutrition.50zgpate85k0')}}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-wrap">
        <div class="flex-al mb12">
          <!-- <span class="mr10 fs14 color-666">{{$t('gradenSet.gradenSet.nutrition.50zgpate8ho0')}}</span> -->
          <div class="select-box" style="width:170px;">
            <el-select
              @change="search"
              v-model="filter.foodtype_code"
              clearable
              filterable
              :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpate8tk0')"
            >
              <el-option
                v-for="item in filter.FoodtypeList"
                :key="item.foodtype_id"
                :label="item.foodtype_name"
                :value="item.foodtype_code"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width:250px;">
            <el-input
              v-model="filter.keyword"
              clearable
              :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpate96k0')"
              @clear="search"
              @keyup.enter.native="search"
            ></el-input>
          </div>
          <el-button type="primary" size="mini" class="search-btn fs14" @click="search">{{$t('gradenSet.gradenSet.nutrition.50zgpate9ig0')}}</el-button>
        </div>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont :tableData="tableList" @switchChange="switchChange">
          <!-- 按钮操作组********start -->
          <el-table-column ref="fixedColumn" :label="$t('gradenSet.gradenSet.nutrition.50zgpate9ts0')" align="center" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native.prevent="handEdit(scope.row)">{{$t('gradenSet.gradenSet.nutrition.50zgpatea7k0')}}</el-button>
              <el-button type="text" size="small" @click.native.prevent="handDelete(scope.row)">{{$t('gradenSet.gradenSet.nutrition.50zgpateakw0')}}</el-button>
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px;"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 侧边弹窗******新增或者编辑菜肴 -->
    <el-drawer
      :title="propData.isEdit? $t('gradenSet.gradenSet.nutrition.50zgphz395c0') : $t('gradenSet.gradenSet.nutrition.50zgphz3aoo0') "
      :visible.sync="propData.cancelVisible"
      direction="rtl"
      size="700px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="propData.handleClose"
    >
      <div class="slider-btn">
        <el-button
          v-if="!propData.isEdit && !isshowCompleted"
          type="primary"
          size="mini"
          @click="onSubmit"
        >{{$t('gradenSet.gradenSet.nutrition.50zgpateaw80')}}</el-button>
        <el-button v-if="isshowCompleted" type="primary" size="mini" @click="handleCompleted">{{$t('gradenSet.gradenSet.nutrition.50zgpateb800')}}</el-button>
        <el-button
          v-if="propData.isEdit && !isshowCompleted"
          type="primary"
          size="mini"
          @click="onEditSubmit"
        >{{$t('gradenSet.gradenSet.nutrition.50zgpateaw80')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <el-form label-width="90px" :model="ruleForm" ref="ruleForm">
          <el-form-item
            :label="$t('gradenSet.gradenSet.nutrition.50zgpate96k0')"
            prop="food_name"
            :rules="[{ required: true, message: $t('gradenSet.gradenSet.nutrition.50zgpatebj40') }]"
          >
            <el-input
              clearable
              :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpatebj40')"
              v-model="ruleForm.food_name"
              style="width:320px;"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('gradenSet.gradenSet.nutrition.50zgpate8ho0')"
            prop="foodtype_code"
            :rules="[{ required: true, message: $t('gradenSet.gradenSet.nutrition.50zgpatebv80') }]"
          >
            <el-select
              v-model="ruleForm.foodtype_code"
              clearable
              filterable
              :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpatebv80')"
              style="width:320px;"
            >
              <el-option
                v-for="item in filter.FoodtypeList"
                :key="item.foodtype_id"
                :label="item.foodtype_name"
                :value="item.foodtype_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="family-info">
            <el-radio-group v-model="family_radio">
              <div class="family-list-info flex-al" v-for="(item,index) in familyNum" :key="index">
                <div class="f-label-title" style="width:90px;">{{item.title}}</div>
                <el-form-item class="name" style="width:150px;">
                  <el-input
                    v-model="item.foodmaterial_name"
                    clearable
                    :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpatec6k0')"
                    style="width:150px;"
                  ></el-input>
                </el-form-item>
                <el-form-item class="mobile" style="width:160px;">
                  <el-input
                    v-model="item.foodmaterial_introduce"
                    clearable
                    :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpatechk0')"
                    style="width:160px;"
                  ></el-input>
                </el-form-item>
                <div class="flex-al" @click.stop>
                  <span v-if="index == 0" class="ml5 cur-pointer" @click="addFamily">
                    <i class="el-icon-circle-plus-outline" style="font-size:18px;color: #F78F0E;"></i>
                  </span>
                  <span
                    v-if="index > 0 "
                    class="btn-delete cur-pointer ml5"
                    @click="Clickdelete(index)"
                  >
                    <i class="el-icon-remove-outline" style="font-size:18px;color: #F78F0E;"></i>
                  </span>
                </div>
              </div>
            </el-radio-group>
          </div>
          <el-form-item
            :label="$t('gradenSet.gradenSet.nutrition.50zgpatect40')"
            prop="food_status"
            :rules="[{ required: true, message: $t('gradenSet.gradenSet.nutrition.50zgpated6g0') }]"
          >
            <el-radio-group v-model="ruleForm.food_status" @change="selectGraden()">
              <el-radio :label="1">{{$t('gradenSet.gradenSet.nutrition.50zgpatedhk0')}}</el-radio>
              <el-radio :label="0">{{$t('gradenSet.gradenSet.nutrition.50zgpatedtc0')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div
          class="nutritionAddGarden"
          v-if="ruleForm.food_status=='0' && propData.isShowSuitGraden"
        >
          <!-- <div
          class="nutritionAddGarden"
          v-if="ruleForm.food_status=='0'"
          >-->
          <div class="title">
            <span>{{$t('gradenSet.gradenSet.nutrition.50zgpatect40')}}</span>
            <el-button type="primary" size="mini" @click="addGradenSet">{{$t('gradenSet.gradenSet.nutrition.50zgpatee8g0')}}</el-button>
          </div>
          <div class="tableDiv" ref="auto_graden_height_table">
            <settingTableCont :tableData="tableGradenList">
              <!-- 按钮操作组********start -->
              <el-table-column
                ref="fixedColumn"
                :label="$t('gradenSet.gradenSet.nutrition.50zgpate9ts0')"
                align="center"
                width="120px"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.native.prevent="delGraden(scope.row)"
                  >{{$t('gradenSet.gradenSet.nutrition.50zgpateenk0')}}</el-button>
                </template>
              </el-table-column>
              <!-- 按钮操作组********end -->
            </settingTableCont>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 菜肴分类设置  侧边弹窗---->
    <el-drawer
      :title="$t('gradenSet.gradenSet.nutrition.50zgpate7s00')"
      :visible.sync="mealSetVisible"
      direction="rtl"
      size="700px"
      :modal="false"
      custom-class="pop-slider--box mealSet-box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button type="primary" size="mini" @click="addHandele">{{$t('gradenSet.gradenSet.nutrition.50zgpatef4c0')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <div class="flex-wrap">
          <div class="flex-al Inquire-box mb20">
            <div class="ipt-box" style="width:270px;">
              <el-input
                v-model="meal_filter.keyword"
                @clear="mealSearch"
                @keyup.enter.native="mealSearch"
                clearable
                :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpateffo0')"
              ></el-input>
            </div>
            <el-button @click="mealSearch" type="primary" size="small" class="search-btn fs14">{{$t('gradenSet.gradenSet.nutrition.50zgpatefp80')}}</el-button>
          </div>
        </div>
        <div class="meal-table" ref="auto_height_meal_table">
          <noBorderTableCont :tableData="tableListMeal">
            <!-- 按钮操作组********start -->
            <el-table-column
              ref="fixedColumn"
              :label="$t('gradenSet.gradenSet.nutrition.50zgpate9ts0')"
              align="center"
              width="120px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="editmealschool(scope.row)"
                >{{$t('gradenSet.gradenSet.nutrition.50zgpatea7k0')}}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="delmealschool(scope.row)"
                >{{$t('gradenSet.gradenSet.nutrition.50zgpateakw0')}}</el-button>
              </template>
            </el-table-column>
            <!-- 按钮操作组********end -->
          </noBorderTableCont>
        </div>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px;"
          :current-page.sync="meal_paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="meal_paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="meal_paging.pageTotal"
          @current-change="curPageChangeMeal"
          @size-change="pageSizeChangeMeal"
        ></el-pagination>
      </div>
    </el-drawer>
    <!-- 添加/编辑*****菜肴分类设置 -->
    <div class="small-dialog" v-if="mealVisible">
      <el-dialog
        :title="mealTitle"
        :visible.sync="mealVisible"
        width="500px"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <el-form label-width="120px" :model="mealFormData" ref="mealFormData">
            <el-form-item
              :label="$t('gradenSet.gradenSet.nutrition.50zgpatefz40')"
              prop="foodtype_name"
              :rules="[{ required: true, message: $t('gradenSet.gradenSet.nutrition.50zgpateg8g0') }]"
            >
              <el-input :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpateg8g0')" clearable v-model="mealFormData.foodtype_name"></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('gradenSet.gradenSet.nutrition.50zgpateghg0')"
              prop="foodtype_code"
              :rules="[{ required: true, message: $t('gradenSet.gradenSet.nutrition.50zgpategq80') }]"
            >
              <el-input
                type="number"
                :placeholder="$t('gradenSet.gradenSet.nutrition.50zgpategq80')"
                clearable
                v-model="mealFormData.foodtype_code"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- 新增 -->
          <el-button v-if="!ismealEdit" type="primary" size="mini" @click="addFoodtypeAction">{{$t('gradenSet.gradenSet.nutrition.50zgpategzw0')}} {{$t('gradenSet.gradenSet.nutrition.50zgpateh980')}}</el-button>
          <!-- 编辑 -->
          <el-button v-else type="primary" size="mini" @click="updateFoodtypeAction">{{$t('gradenSet.gradenSet.nutrition.50zgpategzw0')}} {{$t('gradenSet.gradenSet.nutrition.50zgpateh980')}}</el-button>
          <el-button size="mini" @click="mealVisible = false">{{$t('gradenSet.gradenSet.nutrition.50zgpatehi80')}} {{$t('gradenSet.gradenSet.nutrition.50zgpatehtc0')}}</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 添加园所****弹框 -->
    <addGradenSet
      :addSuitGraden="addSuitGraden"
      @handConfirm="handConfirm"
      @handleCloseFrame="addSuitGraden=false"
    ></addGradenSet>
    <!--删除下发园所弹窗 -->
    <popTips
      :dialogVisable="delSuitGraden"
      :popTipsCont="popTips_delSuitGraden"
      @handConfirm="delFoodSchoolAction"
      @handCancel="delSuitGraden=false"
      @handleCloseTip="delSuitGraden=false"
    ></popTips>
    <!-- 删除菜肴 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del"
      @handConfirm="delFoodAction"
      @handCancel="delItem=false"
      @handleCloseTip="delItem=false"
    ></popTips>
    <!-- 删除菜肴分类 -->
    <popTips
      :dialogVisable="delmeal"
      :popTipsCont="popTips_delmeal"
      @handConfirm="delFoodtypeAction"
      @handCancel="delmeal=false"
      @handleCloseTip="delmeal=false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import noBorderTableCont from "@/components/tables/noBorderTableCont.vue";
import addGradenSet from "@/components/Graden/addGradenSet.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import setHttp from "../../Set";
export default {
  name: "setting",
  components: {
    settingTableCont,
    noBorderTableCont,
    addGradenSet,
    popTips
  },
  data() {
    return {
      isshowCompleted: false,
      delItem: false, //删除菜肴
      //删除菜肴****弹窗
      popTips_del: {
        btn_text1: this.$t('gradenSet.gradenSet.nutrition.50zgpatei2k0'),
        btn_text2: this.$t('gradenSet.gradenSet.nutrition.50zgpateic00'),
        title: this.$t('gradenSet.gradenSet.nutrition.50zgpateilk0'),
        context: this.$t('gradenSet.gradenSet.nutrition.50zgpateiuw0')
      },
      foodId: "", //菜肴id
      schoolId: "",
      addSuitGraden: false, //添加下发园所
      delSuitGraden: false, //删除下发园所
      popTips_delSuitGraden: {
        btn_text1: this.$t('gradenSet.gradenSet.nutrition.50zgpatei2k0'),
        btn_text2: this.$t('gradenSet.gradenSet.nutrition.50zgpateic00'),
        title: this.$t('gradenSet.gradenSet.nutrition.50zgpatej3w0'),
        context: this.$t('gradenSet.gradenSet.nutrition.50zgpateiuw0')
      },
      //检索-table
      filter: {
        foodtype_code: "", //菜肴分类
        keyword: "", //关键词
        FoodtypeList: [] //菜肴类别下拉列表
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 10
      },
      //侧边弹窗******新增或者编辑菜肴
      propData: {
        cancelVisible: false, //新增或者编辑菜肴
        isEdit: false, //是否编辑菜肴
        isShowSuitGraden: false //是否显示下发园所
      },
      // 表格数据-下发园所
      tableGradenList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      //新增/编辑菜肴--- 表单
      ruleForm: {
        food_name: "",
        foodtype_code: "",
        food_status: 1
      },
      familyNum: [
        {
          title: this.$t('gradenSet.gradenSet.nutrition.50zgpatejds0'),
          foodmaterial_name: "",
          foodmaterial_introduce: ""
        }
      ],
      family_radio: 0,

      // 菜肴分类设置----start
      mealSetVisible: false, //菜肴分类设置
      delmeal: false, //删除菜肴分类设置
      foodtypeId: "", //所选食物分类id
      //删除菜肴分类设置****弹窗
      popTips_delmeal: {
        btn_text1: this.$t('gradenSet.gradenSet.nutrition.50zgpatei2k0'),
        btn_text2: this.$t('gradenSet.gradenSet.nutrition.50zgpateic00'),
        title: this.$t('gradenSet.gradenSet.nutrition.50zgpatejm80'),
        context: this.$t('gradenSet.gradenSet.nutrition.50zgpateiuw0')
      },
      mealVisible: false, //新增/编辑菜肴分类设置
      mealTitle: this.$t('gradenSet.gradenSet.nutrition.50zgpatejvc0'),
      ismealEdit: false, //是否为编辑菜肴分类设置
      //筛选****菜肴分类设置
      meal_filter: {
        keyword: "" //关键词
      },
      // 菜肴分类设置表格数据
      tableListMeal: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: "300px" //表格高度
        }
      },
      // 分页
      meal_paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 0
      },
      // 添加或者编辑菜肴分类表单
      mealFormData: {
        foodtype_name: "",
        foodtype_code: ""
      }
    };
  },
  created() {
    this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
    this.getFoodtypeApi(); //通用->获取菜肴类别下拉列表--qyh
  },
  methods: {
    handleCompleted() {
      this.propData.cancelVisible = !this.propData.cancelVisible;
    },
    //园所相关设置->获取菜肴列表--qyh
    getFoodList() {
      setHttp
        .getFoodList({
          is_count: "1", //是否需要总数，可以不传
          p: this.paging.curPage,
          num: this.paging.pageSize,
          // 筛选条件
          foodtype_code: this.filter.foodtype_code,
          keyword: this.filter.keyword
        })
        .then(res => {
          this.paging.pageTotal = parseInt(res.data.result.allnum);
          this.tableList.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.tableList.list = res.data.result.list;
          } else {
            this.tableList.list = [];
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    //通用->获取菜肴类别下拉列表--qyh
    getFoodtypeApi() {
      this.$http.getFoodtypeApi({}).then(res => {
        if (res.data.error == 0) {
          this.filter.FoodtypeList = res.data.result.list;
        } else {
          this.filter.FoodtypeList = [];
        }
      });
    },
    // 园所相关设置->菜肴适配园所列表--qyh
    getFoodSchoolList() {
      setHttp
        .getFoodSchoolList({
          food_id: this.foodId
        })
        .then(res => {
          this.tableGradenList.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.tableGradenList.list = res.data.result.list;
          } else {
            this.tableGradenList.list = [];
            this.tableGradenList.options.errortip = res.data.errortip;
          }
          this.propData.isShowSuitGraden = true;
          this.selectGraden(); //显示下发园所
        });
    },
    // 园务相关设置->查看菜肴详情
    getFoodOneApi() {
      setHttp
        .getFoodOneApi({
          food_id: this.foodId
        })
        .then(res => {
          let data = res.data.result;
          if (res.data.error == 0) {
            this.propData.isEdit = true; //是否编辑菜肴
            this.propData.cancelVisible = !this.propData.cancelVisible;
            this.resetForm("ruleForm");
            this.ruleForm = {
              food_name: data.food[0].food_name,
              foodtype_code: data.food[0].foodtype_code,
              food_status: parseInt(data.food[0].food_status)
            };
            console.log(data.material);
            if (data.material.length > 0) {
              this.familyNum = data.material;
              this.familyNum[0].title = this.$t('gradenSet.gradenSet.nutrition.50zgpatejds0');
            }
            if (this.ruleForm.food_status == 0) {
              this.getFoodSchoolList(); // 园所相关设置->菜肴适配园所列表--qyh
            }
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 园所相关设置->添加菜肴--qyh
    addFoodAction() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let data = this.familyNum;
          data.forEach((item) => {
            delete item.title; //删除属性
          });
          setHttp
            .addFoodAction({
              food_name: this.ruleForm.food_name,
              foodtype_code: this.ruleForm.foodtype_code,
              food_status: this.ruleForm.food_status,
              meterial: JSON.stringify(data)
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                if (this.ruleForm.food_status == "0") {
                  this.foodId = res.data.result.food_id;
                  this.getFoodSchoolList(); // 园所相关设置->菜肴适配园所列表--qyh
                } else {
                  // 全部
                  this.propData.cancelVisible = false;
                }
                this.foodId = res.data.result.food_id;
                this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //园所相关设置->编辑菜肴--qyh
    updateFoodAction() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let data = this.familyNum;
          data.forEach((item) => {
            delete item.title; //删除属性
          });
          setHttp
            .updateFoodAction({
              food_id: this.foodId,
              food_name: this.ruleForm.food_name,
              foodtype_code: this.ruleForm.foodtype_code,
              food_status: this.ruleForm.food_status,
              meterial: JSON.stringify(data)
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.propData.cancelVisible = false;
                this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 园所相关设置->删除菜肴--qyh
    delFoodAction() {
      setHttp
        .delFoodAction({
          food_id: this.foodId
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delItem = false;
            this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //园所相关设置->添加适配园所-qyh
    addFoodSchoolAction(school) {
      setHttp
        .addFoodSchoolAction({
          school: JSON.stringify(school)
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.addSuitGraden = false;
            this.isshowCompleted = true;
            this.getFoodSchoolList(); // 园所相关设置->菜肴适配园所列表--qyh
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //园所相关设置->删除适配园所-qyh
    delFoodSchoolAction() {
      setHttp
        .delFoodSchoolAction({
          food_id: this.foodId,
          school_id: this.schoolId
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delSuitGraden = false;
            this.getFoodSchoolList(); // 园所相关设置->菜肴适配园所列表--qyh
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //园务相关设置->改变菜肴启用状态
    ChangeFoodStatusAction(val) {
      setHttp
        .ChangeFoodStatusAction({
          food_id: val.food_id,
          food_iseffected: val.food_iseffected == "1" ? "0" : "1"
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //检索
    search() {
      this.paging.curPage = 1;
      this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
    },
    //新增
    handAdd() {
      this.isshowCompleted = false;
      this.propData.isEdit = false; //是否编辑菜肴
      this.propData.cancelVisible = !this.propData.cancelVisible;
      this.propData.isShowSuitGraden = false;
      this.resetForm("ruleForm");
    },
    //编辑
    handEdit(row) {
      this.isshowCompleted = false;
      this.foodId = row.food_id;
      this.propData.isShowSuitGraden = true;
      this.getFoodOneApi(); // 园务相关设置->查看菜肴详情
      this.getFoodSchoolList(); // 园所相关设置->菜肴适配园所列表--qyh
      console.log(row);
    },
    //删除
    handDelete(row) {
      console.log(row);
      this.foodId = row.food_id;
      this.delItem = !this.delItem;
    },
    //侧边弹窗 - 新增 - 提交
    onSubmit() {
      this.addFoodAction(); // 园所相关设置->添加菜肴--qyh
    },
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      this.updateFoodAction(); //园所相关设置->编辑菜肴--qyh
    },
    // 菜肴分类设置弹框******显示
    //园所相关设置->获取食物分类列表--qyh
    getFoodtypeList() {
      setHttp
        .getFoodtypeList({
          is_count: "1", //是否需要总数，可以不传
          p: this.meal_paging.curPage,
          num: this.meal_paging.pageSize,
          // 筛选条件
          keyword: this.meal_filter.keyword
        })
        .then(res => {
          this.meal_paging.pageTotal = parseInt(res.data.result.allnum);
          this.tableListMeal.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.tableListMeal.list = res.data.result.list;
          } else {
            this.tableListMeal.list = [];
            this.tableListMeal.options.errortip = res.data.errortip;
          }
        });
    },
    handMealSet() {
      this.meal_paging.curPage = 1;
      this.meal_paging.pageSize = 10;
      this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
      this.mealSetVisible = !this.mealSetVisible;
      this.$nextTick(() => {
        if (this.$refs["auto_height_meal_table"]) {
          this.tableListMeal.options.tableHeight = this.$Tool.getTableHeight(
            this.$refs.auto_height_meal_table.getBoundingClientRect().top + 72
          );
        }
      });
    },
    // 检索***菜肴分类列表
    mealSearch() {
      this.meal_paging.curPage = 1;
      this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
    },
    //园所相关设置->新增食物分类--qyh
    addFoodtypeAction() {
      this.$refs["mealFormData"].validate(valid => {
        if (valid) {
          setHttp
            .addFoodtypeAction({
              foodtype_name: this.mealFormData.foodtype_name,
              foodtype_code: this.mealFormData.foodtype_code
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.mealVisible = false;
                this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
                this.getFoodtypeApi(); //通用->获取菜肴类别下拉列表--qyh
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //园所相关设置->编辑食物分类--qyh
    updateFoodtypeAction() {
      this.$refs["mealFormData"].validate(valid => {
        if (valid) {
          setHttp
            .updateFoodtypeAction({
              foodtype_id: this.foodtypeId,
              foodtype_name: this.mealFormData.foodtype_name,
              foodtype_code: this.mealFormData.foodtype_code
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.mealVisible = false;
                this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
                this.getFoodtypeApi(); //通用->获取菜肴类别下拉列表--qyh
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //园所管理->删除菜肴分类
    delFoodtypeAction() {
      setHttp
        .delFoodtypeAction({
          foodtype_id: this.foodtypeId
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delmeal = false;
            this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
            this.getFoodtypeApi(); //通用->获取菜肴类别下拉列表--qyh
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 新增菜肴分类
    addHandele() {
      this.resetForm("mealFormData");
      (this.ismealEdit = false), //是否为编辑菜肴分类设置
        (this.mealTitle = this.$t('gradenSet.gradenSet.nutrition.50zgpatejvc0')),
        (this.mealVisible = true);
    },
    // 删除菜肴分类设置
    delmealschool(row) {
      this.foodtypeId = row.foodtype_id;
      this.delmeal = true;
    },
    // 编辑菜肴分类设置
    editmealschool(row) {
      this.foodtypeId = row.foodtype_id;
      this.resetForm("mealFormData");
      this.mealFormData = {
        foodtype_name: row.foodtype_name,
        foodtype_code: row.foodtype_code
      };
      (this.ismealEdit = true), //是否为编辑菜肴分类设置
        (this.mealTitle = this.$t('gradenSet.gradenSet.nutrition.50zgpatek4w0')),
        (this.mealVisible = true);
    },
    // 启用状态点击
    switchChange(v1, v2) {
      console.log(v1, v2);

      this.ChangeFoodStatusAction(v1); //园务相关设置->改变菜肴启用状态
    },
    // 选择下发园所
    selectGraden() {
      if (this.ruleForm.food_status == "0") {
        this.$nextTick(() => {
          if (this.$refs["auto_graden_height_table"]) {
            this.tableGradenList.options.tableHeight = this.$Tool.getTableHeight(
              this.$refs.auto_graden_height_table.getBoundingClientRect().top +
                30
            );
          }
        });
      }
    },
    // 添加园所
    addGradenSet() {
      this.addSuitGraden = !this.addSuitGraden;
    },
    // 删除园所
    delGraden(v) {
      this.schoolId = v.school_id;
      this.delSuitGraden = !this.delSuitGraden;
      console.log(v);
    },
    // 添加园所确定提交
    handConfirm(val) {
      console.log(val);
      let data = [],
        _this = this;
      val.forEach((item) => {
        data.push({
          school_id: item.school_id,
          food_id: _this.foodId
        });
      });
      this.addFoodSchoolAction(data); //园所相关设置->添加适配园所-qyh
    },
    Clickdelete(k) {
      this.isdelete = true;
      this.isdeleteindex = k;
      this.familyNum.splice(k, 1);
    },
    addFamily() {
      var family = {
        title: "",
        foodmaterial_name: "",
        foodmaterial_introduce: ""
      };
      this.familyNum.push(family);
    },
    // 重置表单
    resetForm(form) {
      // 数据清空
      //新增/编辑菜肴--- 表单
      this.ruleForm = {
        food_name: "",
        foodtype_code: "",
        food_status: 1
      };
      this.familyNum = [
        {
          title: this.$t('gradenSet.gradenSet.nutrition.50zgpatejds0'),
          foodmaterial_name: "",
          foodmaterial_introduce: ""
        }
      ];
      // 添加或者编辑菜肴分类表单***数据清空
      this.mealFormData = {
        foodtype_name: "",
        foodtype_code: ""
      };
      if (this.$refs[form]) {
        this.$refs[form].resetFields();
      }
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
      this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
      this.getFoodList(); //园所相关设置->获取菜肴列表--qyh
    },
    // 页码变化
    curPageChangeMeal(v) {
      this.meal_paging.curPage = v;
      this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
    },
    // pageSize改变
    pageSizeChangeMeal(v) {
      this.meal_paging.curPage = 1;
      this.meal_paging.pageSize = v;
      this.getFoodtypeList(); //园所相关设置->获取食物分类列表--qyh
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  }
};
</script>

<style lang="less">
//新增园所
.nutritionAddGarden {
  .title {
    margin: 0 0px 12px 0px;
    display: flex;
    justify-content: space-between;
  }
}

// 家庭信息样式
.family-info {
  .el-input__inner {
    padding-right: 10px;
  }
  .f-label-title {
    display: inline-block;
    width: 100px;
    line-height: 36px;
    text-align: right;
    color: #55606e;
    padding: 0 12px 0 0;
  }
  .family-list-info {
    position: relative;
    font-size: 14px;
    line-height: 36px;
    margin-bottom: 22px;
    .el-form-item {
      margin-bottom: 0px;
    }
    // 默认单选按钮样式
    .isdefault {
      margin-right: 0px;
    }
    .el-form-item__error {
      position: absolute;
    }
    .el-form-item {
      display: inline-block;
      width: 110px;
      .el-form-item__content {
        margin-left: 0px !important;
      }
    }
    .name {
      width: 90px;
      margin: 0px 10px 0 0;
    }
    .mobile {
      width: 120px;
    }
  }

  .cofirm-delete {
    position: absolute;
    top: 40px;
    right: -10px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    z-index: 200;
    > div {
      padding: 10px 20px;
    }
    .delete-top {
      line-height: 30px;
      padding: 0px 20px;
      background: rgba(238, 238, 238, 1);
      border-radius: 4px 4px 0px 0px;
    }
    .delete-footer {
      padding: 0px 20px 10px 20px;
      .el-button + .el-button {
        margin-left: 32px !important;
      }
    }
  }
}
</style>
